<template>
  <div>
    <div style="height:140px">
      <title1></title1>

      <!--头部面包屑-->
      <div class="breadCrumbBox flexCenter">
        <div style="width: 1200px;height: 100%;" class="flexAlignCenter">
          <a-breadcrumb separator=">">
            <a-breadcrumb-item v-if="homeFlag">
              <router-link :to="home">首页</router-link>
            </a-breadcrumb-item>
            <a-breadcrumb-item v-if="projectFlag">
              <router-link :to="projectDetail">{{this.projectName}}</router-link>
            </a-breadcrumb-item>
            <a-breadcrumb-item>
              <router-link :to="construction">{{this.laborName}}</router-link>
            </a-breadcrumb-item>
            <a-breadcrumb-item>
              <router-link :to="laborUnit">{{this.unitName}}</router-link>
            </a-breadcrumb-item>
            <a-breadcrumb-item>{{this.teamName}}</a-breadcrumb-item>
          </a-breadcrumb>
        </div>
      </div>
    </div>

    <!-- 顶部内容 -->
    <div class="top flexBetween">
      <div class="logo">
        <div class="logo_text">班组</div>
        <!-- <div style="text-align:center">SG-1标</div> -->
      </div>
      <div class="right">
        <div class="title">{{this.teamName}}</div>

        <div class="info flexStart2">
          <div>
            <span>班组长：</span>
            <span @click="peopleDetail(topInfo.leaderOrgPersonId)">{{this.topInfo.leaderName}}</span>
          </div>
          <div>
            <span>联系电话：{{this.topInfo.cellphone}}</span>
            <span></span>
          </div>
        </div>
      </div>
    </div>

    <div class="informationScreeningBox" ref="piediv" :class="isFixed?'fixed':'noFixed'">
      <!--:class="isFixed?'fixed':'noFixed'"-->
      <a-tabs :activeKey="defaultActiveKey" @change="callback">
        <a-tab-pane key="1" tab="人员信息"></a-tab-pane>
        <a-tab-pane key="2" tab="考勤信息"></a-tab-pane>
        <a-tab-pane key="3" tab="工资支付"></a-tab-pane>
      </a-tabs>
    </div>

    <div class="informationScreeningBox" v-if="isFixed">
      <a-tabs :activeKey="defaultActiveKey" @change="callback">
        <a-tab-pane key="1" tab="人员信息"></a-tab-pane>
        <a-tab-pane key="2" tab="考勤信息"></a-tab-pane>
        <a-tab-pane key="3" tab="工资支付"></a-tab-pane>
      </a-tabs>
    </div>
    <div class="personDetailBox" ref="distanceTopA">
      <div class="certificatePoint" style="position: relative;bottom: 195px;"></div>
      <peopleInfo @queryInfo="queryInfo"></peopleInfo>
    </div>

    <div class="personDetailBoxB" ref="distanceTopB">
      <div class="attendancePoint" style="position: relative;bottom: 195px;"></div>
      <workInfo />
    </div>
    <div class="personDetailBoxE" ref="distanceTopE">
      <div class="resumePoint" style="position: relative;bottom: 195px;"></div>
      <wagePayment />
    </div>
    <supportCompany></supportCompany>
  </div>
</template>

<script>
import title1 from '@/views/title/index.vue'
import peopleInfo from './peopleInfo/index.vue'
import workInfo from './workInfo/index.vue'
import wagePayment from './wagePayment/index.vue'
import supportCompany from '@/views/supportCompany/index.vue'

export default {
  mounted() {
    window.scrollTo(0, 0)
    this.test = this.debounce(this.handleScroll, 20)
    window.addEventListener('scroll', this.test)
    if (sessionStorage.getItem('imgdata')) {
      this.projectName = JSON.parse(sessionStorage.getItem('imgdata')).fullName
    }
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.test)
  },
  destroyed() {
    window.removeEventListener('scroll', this.test)
  },
  components: {
    title1,
    peopleInfo,
    workInfo,
    wagePayment,
    supportCompany
  },
  data() {
    return {
      home: '/gateway',
      projectDetail: '/projectDetails',
      construction: '/fu/construction',
      laborUnit: '/laborUnit',
      defaultActiveKey: '1', //默认选中的面板
      isFixed: false,
      homeFlag: JSON.parse(sessionStorage.getItem('homeFlag')),
      projectFlag: JSON.parse(sessionStorage.getItem('projectFlag')),
      positionSign: {
        positionSignA: false,
        positionSignB: false,
        positionSignE: false
      },
      labourHeight: '75px',
      contractHeight: '75px',
      labour: false,
      contract: false,

      columns1: '',
      data2: '',
      columns2: '',
      data3: '',
      columns3: '',
      data4: '',
      columns4: '',
      topInfo: '',
      projectName: '',
      laborName: sessionStorage.getItem('laborName'),
      unitName: sessionStorage.getItem('unitName'),
      teamName: sessionStorage.getItem('teamName')
    }
  },
  methods: {
    queryInfo(param) {
      this.topInfo = param
    },
    debounce(fn, wait) {
      var timeout = null
      return function() {
        if (timeout !== null) clearTimeout(timeout)
        timeout = setTimeout(fn, wait)
      }
    },
    callback(tab) {
      this.defaultActiveKey = tab
      const tabObj = {
        '1': '.certificatePoint',
        '2': '.attendancePoint',
        '3': '.resumePoint'
      }

      this.$el.querySelector(tabObj[tab]).scrollIntoView({ behavior: 'smooth', block: 'start' })
    },
    pdfDow() {
      window.open(
        'http://it-jhkj.zhinengjianshe.com/uploadfile/temp/device/2cd6a578de5d447cbcc70fd857b3b31c/2cd6a578de5d447cbcc70fd857b3b31c.pdf'
      )
    },

    handleScroll() {
      const distanceTopA = this.$refs.distanceTopA.getBoundingClientRect().top
      const distanceTopB = this.$refs.distanceTopB.getBoundingClientRect().top

      const distanceTopE = this.$refs.distanceTopE.getBoundingClientRect().top

      if (distanceTopA < 235) {
        this.isFixed = true
      } else {
        // if (!(this.isFixed)) return;
        this.isFixed = false
      }

      // console.log(1111111)

      // console.log(distanceTopA)
      // console.log(2222222)
      // console.log(distanceTopB)
      // console.log(3333333)

      // console.log(distanceTopE)
      if (distanceTopA >= 50 && distanceTopA <= 500) {
        this.defaultActiveKey = '1'
        return
      } else if (distanceTopB >= 50 && distanceTopB <= 250) {
        this.defaultActiveKey = '2'
        return
      } else if (distanceTopE >= 50 && distanceTopE <= 450) {
        this.defaultActiveKey = '3'
      }
      // console.log(distanceTopE,1111);
      // console.log(distanceTopB,2222);
    },
    peopleDetail(id) {
      sessionStorage.setItem('orgPersonId', id)
      this.$router.push({ path: '/personnelInformation' })
    }
  },
  computed: {}
}
</script>

<style scoped>
div,
p,
span {
  font-family: 'Microsoft YaHei';
}
.breadCrumbBox {
  width: 100%;
  height: 40px;
  background-color: rgba(246, 248, 249, 1);
  position: fixed;
  top: 100px;
  z-index: 100;
}
::v-deep .ant-breadcrumb > span:last-child {
  color: rgba(20, 146, 255, 1);
}
.personDetailBox {
  width: 1200px;
  /*height: 500px;*/
  margin: auto;
  margin-bottom: 40px;
}
.personDetailBoxB {
  width: 1200px;
  margin: auto;
  margin-bottom: 40px;
}
/* .personDetailBoxC {
  width: 1200px;
  margin: auto;
  margin-bottom: 40px;
} */
.personDetailBoxE {
  width: 1200px;
  margin: auto;
  margin-bottom: 140px;
}
.leftBox {
  width: 140px;
  height: 100%;
}
.rightBox {
  width: 1019px;
  height: 100%;
}
.photoBox {
  width: 140px;
  height: 172px;
}
.personnelCode {
  font-size: 14px;
  color: #999999;
  text-align: center;
  margin-top: 16px;
}
.code {
  font-size: 16px;
  color: #333333;
  font-weight: 400;
  text-align: center;
  margin-bottom: 0;
}
.jobInformation {
  font-size: 14px;
  width: 80px;
  height: 24px;
  text-align: center;
  border-radius: 0;
  margin: auto;
  margin-top: 14px;
}
.personName {
  font-size: 24px;
  font-weight: bold;
  color: #333333;
}
.personJob {
  font-size: 16px;
  font-weight: 400;
  color: #333333;
  margin-left: 36px;
}
.personCardBox {
  width: 100%;
  height: 162px;
  padding: 24px 78px 21px 30px;
  background-color: #f5faff;
  margin-top: 22px;
}
.personCardBox > div > p {
  font-size: 15px;
  color: #333;
  font-weight: 400;
}
.idCardBox > div > p {
  font-size: 14px;
  color: #666;
  font-weight: 400;
  margin-top: 16px;
  text-align: center;
}
.serviceInformationBox {
  margin-top: 25px;
}
.serviceInformationBox > p {
  font-size: 16px;
  font-weight: 400;
  color: #333;
}
.serviceInformation {
  width: 100%;
  /*height: 128px;*/
  background-color: #f5faff;
  overflow: hidden;
}
.serviceInformation > div {
  margin-left: 30px;
}
.serviceInformation > div > span {
  display: inline-block;
  width: 340px;
}
.informationScreeningBox {
  width: 1200px;
  margin: auto;
  margin-top: 72px;
  margin-bottom: 30px;
}
.point {
  display: inline-block;
  width: 90px;
  height: 37px;
  text-align: center;
  line-height: 37px;
  border-bottom: 2px solid #1492ff;
  color: #1492ff;
  font-size: 16px;
}
.pointBox {
  border-bottom: 1px solid #e4e4e4;
  margin-bottom: 40px;
}
.labourClass {
  height: var(--box-height);
}
.contractClass {
  height: var(--box-height);
}
.fixed {
  position: fixed;
  top: 140px;
  background-color: white;
  color: white;
  left: calc(50% - 600px);
  margin: 0;
  z-index: 100;
  height: 45px;
}
.noFixed {
  position: static;
}
.positionSignAClass {
  height: 184px;
}
.positionSignBClass {
  height: 147px;
}
/*.personDetailBox > div{*/
/*  border-bottom: 1px solid #E4E4E4;*/
/*}*/
/*.serviceInformation > div{*/
/*  width: 100px;*/
/*}*/
/*.serviceInformation > div > p{*/
/*  margin: 0;*/
/*}*/
.breadCrumbBox {
  width: 100%;
  height: 40px;
  background-color: rgba(246, 248, 249, 1);
}
.top,
.tab {
  width: 1200px;
  margin: 0 auto;
  margin-bottom: 20px;
  font-size: 15px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  line-height: 31px;
}
.flexStart1 {
  height: 33px;
  margin-bottom: 15px;
  border-bottom: 1px solid #ccc;
}
.topLogo {
  position: fixed;
  left: calc(50% - 600px);
  top: 0;
  z-index: 11;
  background: #ffffff;
}
.top {
  padding-top: 40px;
  margin-bottom: 70px;
}
.logo {
  margin-right: 41px;
}
.logo_text {
  width: 140px;
  height: 140px;
  background: #00cc00;
  color: #ffffff;
  line-height: 50px;
  font-size: 38px;
  padding: 40px 33px 24px 31px;
}
.right {
  width: 1019px;
}
.title {
  font-size: 28px;
  line-height: 31px;
  margin-bottom: 22px;
  font-weight: 600;
}
.info {
  font-size: 15px;
  color: #333333;
  line-height: 31px;
  width: 1019px;
  background: #f5faff;
  padding: 10px 30px;
}
.info div {
  width: 353px;
}
.info div :nth-child(2) {
  color: #1890ff;
  cursor: pointer;
}
::v-deep .ant-breadcrumb > span:last-child a {
  color: rgba(20, 146, 255, 1);
}
</style>
